<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display:inline-block;
            padding:6px 12px;
            background: #6ec2ff;
            cursor: pointer;
            color:#fff;
            border-radius:3px;
        }
        .btn:hover{
            background: #82caff;
        }
        #contxt{
            color:#f00;
            padding:20px;
        }
    </style>
</head>
<body>
<div style="margin-bottom:50px;">
<h2>Jsonp跨域请求:</h2>
<div>  JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。
     缺点是仅支持get方法具有局限性。
</div>
</div>

<span class="btn" onclick="getJsonpData()">getData</span>
<div id="contxt"></div>
</body>
<script>
    var url = 'https://www.toutiao.com/api/pc/hot_gallery/?widen=1'


    function jsonpRequestData(url){
        if(!document.querySelector("[symbol='jsonp-request']")){
            //创建script标签
            var script = document.createElement('script')
            //设置script  symbol='jsonp-request'
            script.setAttribute("symbol",'jsonp-request')
            //设置回调函数

            // 设置script的属性，设置请求地址
            script.src = url+'&callback=handleJsonpRequest'
            // 让script生效
            //document.body.insertBefore(script, document.body.firstChild);
            document.body.appendChild(script)
        }
    }



    function handleJsonpRequest(data){
        //数据请求回来会被触发的函数
        datas = data.data
        var contxt = document.getElementById('contxt')
        contxt.innerHTML = datas[0].title
    }


    function getJsonpData(){
        jsonpRequestData(url)
    }

</script>
</html>